<template>
    <div id='auth-apply-wait'>
        <h1 class="card-title">
            <!-- <p><span>还款记录</span></p> -->
            <div class="card-title__button-box">
                <button-loading :percent='percent' :loading='loading_download' @click='download'>下载列表</button-loading>
            </div>
        </h1>
        <div class="form-table">
            <div class="form-content">
                <div class="form-item">
                    <div class="form-item__key">应还款时间(开始)：</div>
                    <div class="form-item__value">
                        <picker-date picker-id='needRepayTimeFrom' key='needRepayTimeFrom' placeholder='选择开始时间' v-model='needRepayTimeFrom'></picker-date>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-item__key">应还款时间(结束)：</div>
                    <div class="form-item__value">
                        <picker-date picker-id='needRepayTimeTo' key='needRepayTimeTo' placeholder='选择结束时间' v-model='needRepayTimeTo'></picker-date>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-item__key">实际还款时间(开始)：</div>
                    <div class="form-item__value">
                        <picker-date picker-id='repayTimeFrom' key='repayTimeFrom' placeholder='选择开始时间' v-model='repayTimeFrom'></picker-date>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-item__key">实际还款时间(结束)：</div>
                    <div class="form-item__value">
                        <picker-date picker-id='repayTimeTo' key='repayTimeTo' placeholder='选择结束时间' v-model='repayTimeTo'></picker-date>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-item__key">姓名：</div>
                    <div class="form-item__value">
                        <input type="text" placeholder="请输入姓名" v-model='name'>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-item__key">手机号：</div>
                    <div class="form-item__value">
                        <input type="text" placeholder="请输入手机号码" v-model='phone'>
                    </div>
                </div>
                <!-- <div class="form-item">
                    <div class="form-item__key">业务类型：</div>
                    <div class="form-item__value">
                        <select-box v-model='businessType' text='所有'>
                            <select-option value='' text='所有'></select-option>
                            <select-option :value='1' text='还本付息'></select-option>
                            <select-option :value='2' text='展期'></select-option>
                        </select-box>
                    </div>
                </div> -->
            </div>
            <a class="card-title__button" @click='getList()'>搜索</a>
        </div>
        
        <loading v-if='loading'></loading>
        <p class='no-data' v-if='!loading && !records.length'>暂无数据</p>
        <div class="table-list" v-if='!loading && records.length'>
            <table>
                <thead class="table-list__head">
                    <tr>
                        <th>序号</th>
                        <th>借款人</th>
                        <th>手机号码</th>
                        <th>借款金额</th>
                        <th>借款时长</th>
                        <th>到账金额</th>
                        <th>服务费</th>
                        <th>放款时间</th>
                        <th>应还款日</th>
                        <th>实际还款日</th>
                        <th>逾期天数</th>
                        <th>逾期利息</th>
                        <!-- <th>业务类型</th> -->
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody class='table-list__body have-border'>
                    <tr v-for='item in records'>
                        <td>{{ item.number || placeholder }}</td>
                        <td>{{ item.name || placeholder }}</td>
                        <td>{{ item.phone || placeholder }}</td>
                        <td>{{ item.lendAmount | toYuan }}</td>
                        <td>{{ item.lendCycle || placeholder }}天</td>
                        <td>{{ item.realLendAmount | toYuan }}</td>
                        <td>{{ item.serviceAmount | toYuan }}</td>
                        <td>{{ item.lendTime || placeholder }}</td>
                        <td>{{ item.needRepayTime || placeholder }}</td>
                        <td>{{ item.repayTime || placeholder }}</td>
                        <td>{{ item.overDays || placeholder }}</td>
                        <td>{{ item.overAmount | toYuan }}元</td>
                        <td>{{ item.businessType || placeholder }}</td>
                        <td>
                            <div class='option-box'>
                                <span class='option-button' @click='goDetail(item.lendId)'>查看</span>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
            <!-- <pagination
                :current-page='listInfo.pageNum'
                :total-page='listInfo.totalPage'
                @pageChange='getList'></pagination> -->
                <el-pagination class="pan"  @current-change="handleCurrentChange" :current-page="listInfo.pageNum"  layout="total, prev, pager, next, jumper" 
                        :total="listInfo.totalCount" :background="true">
                </el-pagination>
        </div>
    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import loading from '../components/Loading.vue'
    import buttonLoading from '../components/ButtonLoading.vue'
    import pagination from '../components/Pagination.vue'
    import dateFormat from '../filters/filter-dateFormat'
    import toYuan from '../filters/filter-toYuan'
    import { rules } from '../utils/utils'
    import  { mapGetters, mapActions }  from 'vuex'
    import { allApi, financeApi } from '../api/api'
    import moment from 'moment'


    export default {
        components:{
            loading,
            buttonLoading,
            pagination,
        },
        filters:{
            dateFormat,
            toYuan,
            booleanToStr(boolean){
                if(boolean === true){
                    return '是'
                }
                else{
                    return '否'
                }
            }
        },
        data() {
            return {
                loading_download:false,
                downloadUrl:'',
                percent:0,
                taskId:'',
                placeholder:'--',
                phone:'',
                name:'',
                needRepayTimeFrom:'',
                needRepayTimeTo:'',
                repayTimeFrom:'',
                repayTimeTo:'',
                businessType:'',
                listInfo:{},
                records:[],
                loading:false,
                type:''
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo'
            ]),
            currentPage(){
                if(_.isEmpty(this.listInfo)) return 1
                return this.listInfo.pageNum
            },
            hasUserCount(){
                return !_.isEmpty(this.userCount)
            },
            noEditObject(){
                return _.isEmpty(this.editObject)
            },
            noInvoiceInfo(){
                return _.isEmpty(this.invoiceInfo)
            }
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip'
            ]),
            // filters
            timestampToDate(timestamp){
                if(!timestamp) return this.placeholder
                return moment(timestamp).format('YYYY-MM-DD')
            },
            handleCurrentChange(val){
                console.log(`当前页: ${val}`);
                this.getList(val);
            },
            // function
            goDetail(id){
                this.$router.replace({
                    name:'finance-in',
                    query:_.merge({},this.$route.query,{
                        num:this.listInfo.pageNum
                    })
                })
                this.$router.push({
                    name:'finance-detail',
                    params:{
                        id:id
                    }
                })
            },
            getList(num = 1){
                if(this.type && !this.phone){
                    this.setMsgTip({
                        text:'请输入手机号',
                        type:'warn'
                    })
                    return
                }
                this.loading = true
                financeApi.repayRecordDataList({
                    pageSize:10,
                    pageIndex:num,
                    phone:this.phone,
                    name:this.name,
                    needRepayTimeFrom:this.needRepayTimeFrom,
                    needRepayTimeTo:this.needRepayTimeTo,
                    repayTimeFrom:this.repayTimeFrom,
                    repayTimeTo:this.repayTimeTo,
                    businessType:this.businessType,
                })
                .then(result=>{
                    this.loading = false
                    this.listInfo = result
                    this.records = result.records
                    if(result.totalPage < result.pageNum){
                        this.getList(result.totalPage)
                    }
                })
                .catch(error => {
                    console.error(error)
                    this.loading = false
                })
            },
            download(){
                this.loading_download = true
                financeApi.downLoadRepayRecordDataList({
                    phone:this.phone,
                    name:this.name,
                    needRepayTimeFrom:this.needRepayTimeFrom,
                    needRepayTimeTo:this.needRepayTimeTo,
                    repayTimeFrom:this.repayTimeFrom,
                    repayTimeTo:this.repayTimeTo,
                    businessType:this.businessType,
                })
                .then(result=>{
                    this.taskId = result.taskId
                    this.downloadUrl = result.downloadUrl
                    this.getAsyncResult()
                })
                .catch(error => {
                    console.error(error)
                    this.loading_download = false
                })
            },
            getAsyncResult(){
                allApi.getAsyncResult({
                    taskId:this.taskId
                })
                .then(result=>{
                    if(!result.finish){
                        this.percent = result.percent
                        setTimeout(()=>{
                            this.getAsyncResult()
                        },2000)
                    }
                    else{
                        this.setMsgTip({
                            text:'正在下载',
                            type:'success'
                        })
                        location.href = this.downloadUrl
                        this.loading_download = false
                        this.percent = 0
                    }
                })
                .catch(error => {
                    console.error(error)
                    this.loading_download = false
                })
            },
            init(){
                this.type = this.$route.query.type
                let num = this.$route.query.num
                if(!this.type){
                    this.getList(num)
                }
                else{
                    this.info = {}
                    this.records = []
                }
            }
        },
        created(){
            this.init()
        },
        watch: {
            '$route' (to, from) {
                this.init()
            }
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";

    #user-index{
        padding:0 40px 20px 40px;
        box-sizing:border-box;
        overflow:auto;
        .user-data{
            padding-bottom: 20px;
        }
        .user-data__list{
            display:flex;
            padding-top: 20px;
            min-height:140px;
        }
        .user-data__item{
            display:flex;
            flex-direction: column;
            justify-content:center;
            align-items:center;
            width: 200px;
            height:120px;
            border:1px solid $sectionColor;
            border-radius:4px;
            box-shadow:rgba(0, 0, 0, 0.03) 0px 1px 6px, rgba(0, 0, 0, 0.04) 0px 1px 4px;
            margin-right:20px;
            span{
                display: block;
                font-size: 30px;
                color:$green;
            }
            p{
                padding-top: 10px;
            }
        }
        .report-detail-button{
            color:$green;
            cursor:pointer;
        }
        .modal-recommend{
            .form-item__value{
                flex:1;
            }
            min-height:330px;
        }
    }
</style>
